import { TabsAll, TabProps } from "@/redux/interface";
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { getUrlWithParams } from "@/utils";

// icon title path closable
const tabsAll: TabsAll = {
  tabsList: [
    // { id: "1", systemId: "123123", fullName: "综合指标", urlAddress: "/zhzb", active: false },
    // { id: "2", systemId: "123123", fullName: "经营效益", urlAddress: "/jyxy", active: false },
    // { id: "3", systemId: "123123", fullName: "成本管控", urlAddress: "/cbgk", active: true },
    // { id: "4", systemId: "123123", fullName: "资产质量", urlAddress: "/zczl", active: false },
    // { id: "5", systemId: "123123", fullName: "财务服务", urlAddress: "/cwfw", active: false },
    // { id: "6", systemId: "123123", fullName: "现金流", urlAddress: "/xjl", active: false },
    // { id: "7", systemId: "123123", fullName: "我的收藏", urlAddress: "/wdsc", active: false }
  ]
};

const tabsAllSlice = createSlice({
  name: "tabs-all",
  initialState: tabsAll,
  reducers: {
    /**
     * @description 指定某个 id 为激活状态
     * @param payload string 菜单/标签的id
     */
    setActiveTab(state, { payload }: PayloadAction<TabProps["id"]>) {
      state.tabsList.forEach(tab => {
        tab.active = tab.id === payload;
      });
    },
    /**
     * @description 一次性设置全部标签信息
     * @param payload 要保存的所有标签信息
     */
    setTabsList(state, { payload }: PayloadAction<TabsAll["tabsList"]>) {
      state.tabsList = payload;
    },
    /**
     * @description 添加一个标签信息
     */
    addTab(state, { payload }: PayloadAction<TabProps>) {
      // 如果不存在, 才添加
      if (state.tabsList.every(item => item.id !== payload.id)) {
        state.tabsList.push(payload);
      }
    },
    /**
     * @description 移除一个标签项
     * @param state
     * @param payload 标签/菜单的id, 是否为激活状态
     */
    removeTab(state, { payload }: PayloadAction<TabProps["id"]>) {
      // 找到目标项, 可能为undefined, 所以尝试取值 目标项?.closable , 取反判断. 与当前项目无关, 所以注释掉
      // if (!state.tabsList.find(item => item.path === payload.path)?.closable) return;
      // 如果要删除的标签项为激活状态
      if (state.tabsList.find(item => item.id === payload)?.active) {
        state.tabsList.forEach((item, index) => {
          if (item.id !== payload) return; // 不是目标标签项, 则本轮循环提前返回
          // 寻找 后一项或前一项
          const nextTab = state.tabsList[index + 1] || state.tabsList[index - 1];
          if (!nextTab) return; // 不存在后一项或前一项, 则直接返回
          // 跳转切换到 备先项. 下行代码不适合当前项目, 后续补逻辑 (欠)
          // window.$navigate(nextTab.path);
        });
      }
      // 用过滤方式删除指定标签项
      state.tabsList = state.tabsList.filter(item => item.id !== payload);
    },
    /**
     * @description 关闭当前项 左/右 侧所有标签
     * @param state
     * @param param1
     */
    closeTabsOnSide(state, { payload }: PayloadAction<{ id: string; type: "left" | "right" }>) {
      const currentIndex = state.tabsList.findIndex(item => item.id === payload.id);
      if (currentIndex !== -1) {
        // 如果目标索引存在
        const range = payload.type === "left" ? [0, currentIndex] : [currentIndex + 1, state.tabsList.length];
        state.tabsList = state.tabsList.filter((item, index) => {
          return index < range[0] || index >= range[1] || !item.active;
        });
      }
    },
    /**
     * @description 除当前标签项, 其余全部被过滤删除
     * @param state
     * @param payload
     */
    closeMultipleTab(state, { payload }: PayloadAction<{ id?: string }>) {
      state.tabsList = state.tabsList.filter(item => {
        return item.id === payload.id || !item.active;
      });
    },
    /**
     * @description 为某一个标签项设置标题
     * @param state
     * @param payload
     */
    setTabTitle(state, { payload }: PayloadAction<string>) {
      state.tabsList = state.tabsList.map(item => {
        // 获取uri, 如果匹配到uri, 设置标题 (似乎当前项目不需要)
        if (item.urlAddress == getUrlWithParams()) {
          return { ...item, fullName: payload };
        }
        return item;
      });
    }
  }
});

export const { setActiveTab, setTabsList, addTab, removeTab, closeMultipleTab, closeTabsOnSide, setTabTitle } =
  tabsAllSlice.actions;
export default tabsAllSlice.reducer;
